<template>
  <div class="index-box">
    <div class="content-head">
      <a-row>
        <a-col span="12">
          <a-button type="primary" icon="plus" style="margin-right: 8px;" @click="() => {$router.push({name:'data_household_nonindex_operation',params:{id:'add'}})}">添加</a-button>
          <a-popconfirm title="确定要删除当前所选非住户?" @confirm="delNon()">
            <a-button :disabled="$common.isEmpty(selectedRowKeys)">删除</a-button>
          </a-popconfirm>
        </a-col>
        <a-col span="8" offset="2">
          <a-input-group>
            <a-button @click="searchModal">
              <a-icon type="filter" />
            </a-button>
            <a-input-search style="width: 240px;float: right;" placeholder="请输入姓名/手机号" enterButton @search="onSearch"/>
          </a-input-group>
        </a-col>
      </a-row>
    </div>
    <div class="content-body">
      <s-table ref="table" :columns="columns" :data="dataSource" :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" rowKey="id">
        <template slot="operation" slot-scope="text,record">
          <a-dropdown>
            <a class="ant-dropdown-link" href="javascript:void(0);">操作 <a-icon type="down" /></a>
            <a-menu slot="overlay" @click="operation($event,record)">
              <a-menu-item key="1">迁入</a-menu-item>
              <a-menu-item key="2">编辑</a-menu-item>
              <a-menu-item key="4">详情</a-menu-item>
              <a-menu-item key="3">
                <a-popconfirm title="确定要删除当前所选非住户?" @confirm="delNon([record.id])">
                  <a href="javascript:void(0);">删除</a>
                </a-popconfirm>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </template>
      </s-table>
    </div>
    <a-modal title="迁入住户" v-model="bindUserModal" :confirmLoading="bindUserModalLoading" :afterClose="() => { form.resetFields(); }" @ok="handleSubmit">
      <a-form :form="form" @submit="handleSubmit">
        <a-form-item label="选择房屋" :labelCol="{xs:{span:24},sm:{span:6}}" :wrapperCol="{xs:{span:24},sm:{span:16}}">
          <a-cascader :options="options" @change="onChange" placeholder="请选择房屋" v-decorator="['house_id_s',{rules:[{required:true,message:'请选择住户身份'}],initialValue:undefined}]" />
        </a-form-item>
        <a-form-item label="身份" :labelCol="{xs:{span:24},sm:{span:6}}" :wrapperCol="{xs:{span:24},sm:{span:16}}">
          <a-select :options="typeList" placeholder="请选择住户身份" v-decorator="['type',{rules:[{required:true,message:'请选择住户身份'}],initialValue:undefined}]"/>
        </a-form-item>
        <a-form-item label="选择类型" :labelCol="{xs:{span:24},sm:{span:6}}" :wrapperCol="{xs:{span:24},sm:{span:16}}">
          <a-select :options="m_list" placeholder="请选择类型" v-decorator="['m_type',{rules:[{required:true,message:'请选择类型'}],initialValue:undefined}]"/>
        </a-form-item>
        <a-form-item label="有效期" :required="true" :labelCol="{xs:{span:24},sm:{span:6}}" :wrapperCol="{xs:{span:24},sm:{span:16}}">
          <a-input-group class="ant-input-group-compact">
              <a-form-item :style="{width:'75%',marginRight:'16px'}" v-show="timeIsShow == false">
                <a-date-picker :style="{width:'100%'}" placeholder="请选择住户有效期" :disabledDate="(current) =>  current && current < moment().endOf('day') " v-decorator="['time']"/>
              </a-form-item>
              <a-form-item>
                <a-checkbox @change="({target:{checked}}) => {
                  timeIsShow = checked;
                  if(checked === true) form.resetFields('time');
                }" v-decorator="['long',{initialValue:false}]">长期</a-checkbox>
              </a-form-item>
          </a-input-group>
        </a-form-item>
        <a-form-item label="备注" :labelCol="{xs:{span:24},sm:{span:6}}" :wrapperCol="{xs:{span:24},sm:{span:16}}">
          <a-input v-decorator="['bz',{rules:[{required:true,message:'请输入备注'}],initialValue:undefined}]"></a-input>
        </a-form-item>
      </a-form>
    </a-modal>
    <a-modal
            title="高级搜索"
            :visible="searchVisible"
            @ok="searchOk"
            :confirmLoading="confirmLoading"
            @cancel="searchCancel"
    >
      <a-row>
        <a-form>
          <a-col span="24">
            <a-form-item label="小区" :label-col="labelCol" :wrapper-col="wrapperCol">
              <a-select placeholder="请选择小区">
                <a-select-option v-for="(item,index) in bd_info" :key="index" :value="item.id" @click="bd_click(item.id)">{{item.name}}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col span="24">
            <a-form-item label="住户身份" :label-col="labelCol" :wrapper-col="wrapperCol">
              <a-select placeholder="请选择身份">
                <a-select-option v-for="(item,index) in user_type" :key="index" :value="index" @click="user_type_click(index)">{{item}}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col span="24">
            <a-form-item label="登录验证" :label-col="labelCol" :wrapper-col="wrapperCol">
              <a-select placeholder="登录验证">
                <a-select-option value="0" @click="log_click(0)">全部</a-select-option>
                <a-select-option value="1" @click="log_click(1)">已验证</a-select-option>
                <a-select-option value="2" @click="log_click(2)">未验证</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col span="24">
            <a-form-item label="数据标签" :label-col="labelCol" :wrapper-col="wrapperCol">
              <a-select placeholder="请选择标签">
                <a-select-option v-for="(item,index) in labels" :key="index" :value="item.id" @click="lab_click(item.id)">{{item.name}}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col span="24">
            <a-form-item label="关键词" :label-col="labelCol" :wrapper-col="wrapperCol">
              <a-input v-on:keyup="gj_name" v-model="name" placeholder="房号/车位号/车牌号/住户/手机号/备注"></a-input>
            </a-form-item>
          </a-col>
        </a-form>
      </a-row>
    </a-modal>
  </div>
</template>

<script>
  import { ACCESS_TOKEN } from '@/store/mutation-types'
  import {STable} from '@/components'
  import moment from 'moment'
  import { mapGetters } from 'vuex'
  import { search_info, getCashierHouse } from '@/api/cashier'
  export default {
    name: 'data_household_nonindex',
    data() {
      return {
        moment,
          labels:[],
          bd_info:[],
          user_type:[],
          m_type:0,
          user_type_val:0,
          log_val:0,
          labelCol:{xs:{span:24},sm:{span:8}},
          wrapperCol:{xs:{span:24},sm:{span:10}},
          lab_val:0,
          gj_name_value:'',
          searchVisible:false,
          confirmLoading:false,
        token:this.$ls.get(ACCESS_TOKEN),
        columns:[
          {
            title: '姓名',
            dataIndex:'name'
          },
          {
            title:'手机',
            dataIndex:'phone'
          },
          {
            title: '性别',
            dataIndex:'gender'
          },
          {
            title: '操作',
            dataIndex:'operation',
            scopedSlots:{customRender:'operation'}
          }
        ],
        form:this.$form.createForm(this),
        typeList: [{ label: '业主本人', value: 1 }, { label: '亲属', value: 2 }, { label: '租客', value: 3 }, { label: '朋友', value: 4 }, { label: '同事', value: 5 }, { label: '保姆', value: 6 }, { label: '司机', value: 7 }, { label: '装修人员', value: 8 }, { label: '其它', value: 9 }], // 住户身份数据
          m_list: [{ label: '买房迁入', value: 1 }, { label: '租房迁入', value: 2 }, { label: '亲属迁入', value: 3 }, { label: '卖房迁出', value: 4 }, { label: '租房到期迁出', value: 5 }], // 住户身份数据
          bindUserModal:false,
        bindUserModalLoading:false,
        timeIsShow:false,
        options:[],
        queryParam:{},
        in_house_user_id:0,
        cur_page:1,
        dataSource:parameter => {
          this.cur_page=parameter.pageNo
          return this.getList(Object.assign(parameter, this.queryParam))
            .then(res => {
              return res
            })
        },
        selectedRowKeys: []
      }
    },
    components:{STable},
    async mounted() {
        this.getHouse();
        this.getMtype();
        this.getBdList();
        this.getUseList();
        this.getLabList();
    },
    methods:{
        ...mapGetters(['token', 'pmsArId', 'nowMg']),
        m_c_type(v){
            this.m_type = v;
        },
        getMtype() {
            return new Promise((resolve, reject) => {
                this.loading = true;
                this.axios({
                    method:'post',
                    url:'/household/get_type',
                    data:Object.assign({token:this.token(),status:1})
                }).then(res => {
                    this.m_list = res.data.data;
                }).catch(err => {
                    this.$message.error('服务器发生错误...',2);
                }).finally(() => {
                    this.loading = false;
                });
            });
        },
        getBdList(){
            this.axios({
                method:'get',
                url:'/community/get_bd_config_list',
                params:{token:this.token(),ar_id: this.pmsArId(),cm_mg_id: this.nowMg()}
            }).then(res => {
                let { code,msg,data } = res;
                if(code === 0){
                    let ifo = {id:0,name:'所有小区'};
                    data.unshift(ifo);
                    this.bd_info=data
                }else this.$message.warning(msg);
            }).catch(err => {
                this.$message.error('服务器发生错误...');
            })
        },
        gj_name(v){
            this.gj_name_value = v.target.value;
        },
        searchModal() {
            this.searchVisible = true
        },
        searchOk() {
            this.searchVisible = false;
            this.queryParam['bd_id'] = this.bd_id;
            this.queryParam['user_type_val'] = this.user_type_val;
            this.queryParam['log_val'] = this.log_val;
            this.queryParam['lab_val'] = this.lab_val;
            this.queryParam['gj_name'] = this.gj_name_value;
            this.$refs.table.refresh(true);
        },
        searchCancel() {
            this.searchVisible = false
        },
        // 非住户列表
      getList(param) {
        return new Promise((resolve, reject) => {
          this.axios({
            method:'post',
            url:'/household/getList',
            data:Object.assign(param,{token:this.token,status:4})
          }).then(res => {
            resolve(res.data);
          }).catch(err => {
            this.$message.error('服务器发生错误...',2);
          })
        });
      },
      // 非住户筛选
      onSearch(val) {
        this.queryParam['search'] = val;
        this.$refs.table.refresh(true);
      },
      onSelectChange (selectedRowKeys) {
        this.selectedRowKeys = selectedRowKeys
      },
      // 删除非住户
      delNon(ids = this.selectedRowKeys){
        this.axios({
          method:'post',
          url:'/household/delNon',
          data:{token:this.token,ids},
        }).then(res => {
          if(res.code === 0){
            this.$message.success(res.msg,2);
            this.$refs.table.refresh();
          }else this.$message.warning(res.msg,2);
        }).catch(err => {
          this.$message.error('服务器发生错误...',2);
        })
      },
      getHouse() {
            getCashierHouse({token:this.token}).then(res => {
                this.options = res.data
            }).catch(err => {
                console.log(err)
            })
        },
      // 确定提交
      handleSubmit(e) {
        e.preventDefault();
        this.form.validateFields((err, values) => {
          if (err) {
            for (let key in err) {
              for (let item of err[key]['errors']) return this.$message.warning(item['message'], 2)
            }
            return false;
          }
          values.house_user_id=this.in_house_user_id
          let houseIdArr=values.house_id_s
          delete values.house_id_s
          if(houseIdArr.length!=4){
            return this.$message.warning('请选择正确的房屋!', 2)
          }
          values.houses_id=houseIdArr[3];
          if(values.long === false && this.$common.isEmpty(values.time)) this.$message.warning('有效期不可为空', 2);
          Object.assign(values,{token:this.token,long:values.long ? 1 : 0,time:this.$common.isEmpty(values.time) ? undefined : values.time.format('YYYY-MM-DD')});
          this.bindUserModalLoading = true;
          this.axios({
            method: 'post',
            url: '/houses/bindUser',
            data: values
          }).then(res => {
            if (res.code == 0) {
              this.$message.success('绑定成功', 1)
              this.$refs.table.refresh();
              this.bindUserModal = false;
            } else this.$message.warning(res.msg)
          }).catch(() => {
            this.$message.error('服务器发生错误...', 2);
          }).finally(() => {
            this.bindUserModalLoading = false;
          })
        })
      },
      // 非住户操作
      operation({ key },info) {
        const _this = this;
        if(key === '1') {
          _this.bindUserModal=true;
          _this.in_house_user_id=info.id
        }
        if(key === '2') _this.$router.push({name:'data_household_nonindex_operation',params:{id:info.id,cur_page:this.cur_page}});
        if(key === '4') _this.$router.push({name:'data_household_nonindex_detail',params:{id:info.id}});
      },
      onChange(){

      }
    }
  }
</script>

<style lang="less" scoped>
  .index-box{
    background: #ffffff;
    padding: 25px;
    box-sizing: border-box;
    .content-body{
      padding-top:20px;
    }
  }
</style>